<template>
  <!-- 模板只能有一个根目录 -->
  <div id="app">
    <p>第一个哟</p>
    <p>{{ name }}</p>
    <button>点击</button>
  </div>
</template>
<script>
// 下面这句代码是暴露当前的组件实例，将来暴露的组件实例不仅仅是script功能，而且还包含着组件的template和style
// 单文件的结构是分离的，但是最终是一个整体：这个整体拥有  结构功能和样式

// default：当前模块的默认对象，后期引入这个文件，就会暴露这个对象
export default {
  data() {
    return { name: "志远" };
  },
};
</script>
<style lang='less' scoped>
/* // lang:指定样式的预处理器，如果不指定，默认为css
// scoped:指定当前样式是的组件作用域样式，只对当前组件的元素有效 */
p {
  color: #41b883;
  font-size: 35px;
}
</style>


